<template>
	<view class="container-bg">
		<u-navbar leftIconColor="#fff" :title="goodsInfo.name" placeholder :autoBack="true">
			<template slot="right">
				<isCollect :goodsId="goodsInfo.id"></isCollect>
				<!-- <image @click="hanldeCollect" class="navber-right mar-right-32"
					:src="isCollect ? '../../static/icon/has-like.png':'../../static/icon/no-like.png' " mode="">
				</image> -->
				<!-- <image @click="hanldeShare" class="navber-right" src="@/static/icon/share.png" mode="" /> -->
			</template>
		</u-navbar>

		<view class="goods-image">
			<!-- <image class="goods-bg" src="../../static/image/product-bg.png" mode=""></image> -->
			<view class="goods-cover">
				<image :src="goodsInfo.cover" mode="widthFix">
				</image>
			</view>
		</view>

		<view class="goods-info">

			<view class="bottom bg-black pad-24">
				<view class="font-w-600 font-32 color-white">{{goodsInfo.name}}</view>
				<view class="centerY betweenX mar-top-20">
					<view class="centerY ">
						<capsule color="#fff" bgColor="rgba(0,0,0,.1)" :number="goodsInfo.build" title="发行"></capsule>
						<capsule color="#fff" bgColor="rgba(0,0,0,.1)" title="流通"
							:number="goodsInfo.out_cnt - goodsInfo.broken_cnt" class="mar-left-40">
						</capsule>
					</view>
					<view v-if="goodsInfo.type == 2" @click="hanldeBoxLog" class="centerXY font-28">
						<text>开盒记录</text>
						<view class="bg-black mar-left-10">
							<u-icon class="pad-4" name="arrow-right" size="12" color="#fff"></u-icon>
						</view>
					</view>
				</view>

			</view>

			<!-- 盲盒奖品 -->
			<boxPrize :goodsId="goodsInfo.id" v-if="goodsInfo.type == 2"></boxPrize>

			<view class="bg-black pad-24 author gap30 mar-top-20">
				<view class="pad-24 centerY betweenX">
					<view class="font-28 font-w-800 color-grey">品牌方</view>
					<view class="font-28 centerY mar-top-10 color-white">
						<image v-if="goodsInfo.issuer_info" class="logo" :src="goodsInfo.issuer_info.avatar">
						</image>
						<text v-if="goodsInfo.issuer_info" class="mar-left-10">{{goodsInfo.issuer_info.name}}</text>
					</view>
				</view>
				<view class="pad-24 centerY betweenX">
					<view class="font-28 font-w-800 color-grey">创作者</view>
					<view class="font-28 centerY mar-top-10 color-white">
						<image v-if="goodsInfo.author_info" class="logo" :src="goodsInfo.author_info.avatar"></image>
						<text v-if="goodsInfo.author_info" class="mar-left-10">{{goodsInfo.author_info.name}}</text>
					</view>
				</view>
			</view>

			<view class="pad-top-bottom-32 bg-black pad-left-right-24 mar-top-20">
				<view class="font-36 my-font color-white">藏品介绍</view>
				<u-parse class="mar-top-24" :content="goodsInfo.desc"></u-parse>
			</view>

			<!-- 购买须知 -->
			<pay-notes></pay-notes>

			<view class="copyright centerX">
				<image src="../../static/icon/copyright.png" mode=""></image>
			</view>
		</view>

		<view class="button-box pad-left-right-32 pad-top-bottom-10 bg-black centerY">
			<view class="button-price color-theme"><text class="font-24">￥</text><text class="font-44">{{data.price}}</text></view>
			<template v-if="buyQuality.enable_buy">
				<view class="button font-36 flex-w" @click="hanldePay">立即购买</view>
			</template>
			<template v-else>
				<view class="button font-36 disabled flex-w">{{buyQuality.msg}}</view>
			</template>
		</view>
		<u-popup :show="isInvitation" mode="top">
			<view class="share-box">
				<share :data="share"></share>
				<view class="centerXY betweenY">
					<image @click="isInvitation = false" class="close mar-top-64" src="../../static/icon/close.png">
					</image>
				</view>
			</view>
		</u-popup>

		<my-popup content="您还没实名认证？" confirmText="去认证" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		goodsSaleInfo,
		realNameAuthInfo,
		focusGoods
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 分享弹窗
				isInvitation: false,
				data: {},
				goodsInfo: {
					author_info: {
						avatar: '',
						name: ''
					}
				},
				buyQuality: {},
				isCollect: false,
				isPopup: false,
				// 分享数据
				share: {},
			}
		},
		onLoad(options) {
			this.infoId = options.id;
			this.getGoodsSaleInfo();
		},
		methods: {
			// 跳转开盒记录
			hanldeBoxLog() {
				uni.navigateTo({
					url: '/pages/my/boxLog?goods_id=' + this.goodsInfo.id
				})
			},
			// 打开分享
			hanldeShare() {
				this.isInvitation = true;
			},
			// 跳转去支付
			hanldePay() {
				realNameAuthInfo().then(res => {
					if (res.data.info.status == 2) {
						uni.navigateTo({
							url: '/pages/goods/order?id=' + this.infoId
						})
					} else {
						this.isPopup = true;
					}
				})
			},
			// 获取详情
			getGoodsSaleInfo() {
				goodsSaleInfo({
					id: this.infoId
				}).then(res => {
					let {
						info,
						goods_info,
						buy_quality
					} = res.data;
					this.buyQuality = buy_quality;
					this.data = info;
					this.goodsInfo = goods_info;

					this.share = {
						name: goods_info.name,
						cover: goods_info.cover,
						price: info.price,
						issuer_info: goods_info.issuer_info,
						url: '/pages/goods/details?id=' + info.id
					}
				})
			},
			// 确认
			hanldeConfirm() {
				this.isPopup = false;
				uni.navigateTo({
					url: '/pages/my/certification'
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 100) {
				this.bgColor = '#FFFFFF';
			} else {
				this.bgColor = 'transparent'
			}
		}
	}
</script>

<style scoped lang="scss">
	.container-bg {
		// background: $uni-bg-black;
		background: url('@/static/image/my-bg.png');
		background-size: 100% 100%;
		
		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}
	}

	.close {
		display: block;
		width: 48rpx;
		height: 48rpx;
	}

	.share-box {
		width: 100vw;
		height: 100vh;
		background: url('../../static/image/login-bg.png') no-repeat;
		background-size: 100% 100%;
		padding-top: var(--status-bar-height); //给组件加个上边距
		padding: 60rpx;
		box-sizing: border-box;
	}

	.navber-right {
		width: 48rpx;
		height: 48rpx;
	}

	.goods-image {
		position: relative;

		.goods-bg {
			display: block;
			width: 100%;
			height: 1124rpx;
		}

		.goods-cover {
			width: 100%;
			// height: 600rpx;
			// position: absolute;
			// bottom: 286rpx;
			display: flex;
			justify-content: center;

			image {
				display: block;
				width: 100%;
			}
		}
	}

	.goods-info {
		width: 100%;
		// transform: translateY(-110rpx);

		.goods-bg {
			background: linear-gradient(45deg, #eb6569 29%, #ffedd6, #ff3c43);
		}
	}

	.logo {
		display: block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}

	.item {
		background: url('/static/icon/product-builder-bg.png') no-repeat;
		background-size: 100% 100%;
		flex: 1;
	}

	.copy {
		display: block;
		width: 28rpx;
		height: 28rpx;
	}

	.copyright {
		margin: 32rpx 0;
		padding-bottom: 150rpx;

		image {
			width: 329rpx;
			height: 55rpx;
		}
	}

	.button-box {
		position: fixed;
		width: 100%;
		bottom: 0;

		.button-price {
			margin-right: 100rpx;
		}

		.button {
			background: $uni-bg-theme;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 8rpx;
		}

		.disabled {
			background: $uni-bg-theme;
			opacity: .5;
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 8rpx;
		}
	}

	.bg-black {
		background: black;
	}
</style>